<template>
  <div>
    <div class="photo">
      <img :src="player.coverImg" alt />
      <p>{{player.name}}</p>
    </div>
    <div class="playerVoteInfo">
      <ul>
        <li>
          <p>{{player.i}}</p>
          <p>排名</p>
        </li>
        <li>
          <p>{{player.ticket}}</p>
          <p>票数</p>
        </li>
        <li>
          <p>{{player.gift}}</p>
          <p>礼物</p>
        </li>
        <li>
          <p>{{player.browse}}</p>
          <p>浏览量</p>
        </li>
      </ul>
    </div>
    <div class="giftList">
      <header>送礼物加票数</header>
      <ul>
        <li
          :class="{active:currentindex==index}"
          @click="changeSel(index,item.price)"
          v-for="(item,index) in giftData"
          :index="index"
          :key="index"
        >
          <p>{{item.name}}</p>
          <div>
            <img :src="item.icon" alt />
          </div>
          <div>+{{item.ticket}}票</div>
        </li>
      </ul>
      <div class="total">
        <div>
          <p>
            <span>￥</span>
            {{sum}}
          </p>
          <span>+20票</span>
        </div>
        <div>
          <div @click="minus" class="plus">-</div>
          <p>{{num}}</p>
          <div @click="plus" class="plus">+</div>
        </div>
      </div>
    </div>
    <button @click="sendGift" type="primary">立即送出</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      giftData: [],
      player: [],
      tag: false,
      currentindex: 0,
      num: 1,
      id: "",
      price: 0.01
    };
  },
  computed: {
    sum: function() {
      return this.num * this.price;
    }
  },
  components: {},
  methods: {
    changeSel(index, price) {
      this.currentindex = index;
      this.price = price;
      console.log(index);
    },
    plus() {
      if (this.num > 99) {
        wx.showModal({
          title: "提示",
          content: "数量不能超过99",
          success(res) {
            if (res.confirm) {
              console.log("用户点击确定");
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          }
        });
        return;
      } else {
        this.num++;
      }
    },
    minus() {
      if (this.num <= 1) {
        wx.showModal({
          title: "提示",
          content: "数量不能小于0",
          success(res) {
            if (res.confirm) {
              console.log("用户点击确定");
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          }
        });
        return;
      } else {
        this.num--;
      }
    },
    getGiftData() {
      this.$fly
        .post("/giftList", {
          activityId: 1,
          id: this.id
        })
        .then(res => {
          console.log("请求礼物接口成功", res);
          this.giftData = res.data.data.hdGift;
          this.player = res.data.data.player;
        })
        .catch(err => {
          console.log("请求礼物接口失败", err);
        });
    },
    sendGift() {
      let total_fee = this.sum * 100;
      let that = this;
      wx.login({
        success: res => {
          this.$fly
            .post("https://mp.zymcloud.com/hp-hd/applet/pay/wxMiniProgramPay", {
              total_fee: total_fee,
              js_code: res.code
            })
            .then(res => {
              if (res.data.code == 0) {
                wx.requestPayment({
                  timeStamp: "res.data.data.timeStamp",
                  nonceStr: "res.data.data.nonceStr",
                  package: "res.data.data.package",
                  signType: "res.data.data.signType",
                  paySign: "res.data.data.paySign",
                  success(res) {
                    // let openid = wx.getStorageSync('openid')
                    console.log("支付成功", res);
                  },
                  fail(err) {
                    console.log("支付失败", err);
                  }
                });
              }
            })
            .catch(err => {
              console.log("支付接口调用失败");
            });
        },
        fail: function(error) {
          console.log("login failed " + error);
        }
      });
    }
  },
  created() {},
  onLoad: function(options) {
    this.id = options.id;
    console.log(options.id);
    this.getGiftData();
  }
};
</script>
<style >
page {
  background-color: #f8f9f9;
  margin-bottom: 60px;
}
</style>

<style scoped>
.photo {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.photo img {
  height: 80px;
  width: 80px;
  border-radius: 50%;
}
.photo p {
  margin-top: 10px;
  font-size: 16px;
  color: #a6acaf;
}
.playerVoteInfo {
  margin: 20px 10px;
  padding: 10px;
  background-color: NAVAJOWHITE;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
}
.playerVoteInfo ul {
  display: flex;
}
.playerVoteInfo ul li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.giftList {
  font-size: 17px;
  margin: 0 10px;
  color: #a6acaf;
}
.giftList header {
  background-color: #fff;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #ecf0f1;
}
.giftList ul {
  background-color: #f4f6f7;
  display: flex;
  flex-wrap: wrap;
}
.giftList ul li {
  box-sizing: border-box;
  background-color: #fff;
  height: 120px;
  width: 30%;
  margin: 5px;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: #979a9a;
  text-align: center;
}
.giftList ul li p {
  flex: 1;
}
.giftList ul li div:nth-child(2) {
  flex: 6;
}
.giftList ul li div:nth-child(2) img {
  width: 99%;
  height: 100%;
}
.giftList ul li div:nth-child(3) {
  background-color: PAPAYAWHIP;
  flex: 1;
}
.active {
  border: 1px solid red;
}
.total {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.total div span {
  font-size: 16px;
  margin-left: 10px;
}
.total div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.total div:nth-child(2) p {
  padding: 5px 15px;
  border: 1px solid #eaedee;
  text-align: center;
}
.plus {
  border: 1px solid #eaedee;
  display: flex;
  padding: 5px 15px;
  justify-content: center;
  align-items: center;
}
button {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-radius: 0;
}
</style>
